<template>
	<view class="mPage">
		<!-- <uni-nav-bar leftIcon="left" title="" statusBar :border="false" :fixed="true" :showPlaceholder="false"
			color="#FFFFFF" backgroundColor="transparent" @clickLeft="handleBack"></uni-nav-bar> -->
		<swiper class="swiper-box" @change="bannerChange">
			<swiper-item v-for="(item, index) in sliders" :key="index">
				<view class="swiper-item">
					<image :src="item" mode="scaleToFill"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="content-box">
			<view class="white-card">
				<view style="width: 100%;display: flex;flex-direction: row;justify-content: space-between;">
					<text class="t1">￥<text class="t2">{{mDetails.price}}</text></text>
					<text class="t3">已预约 {{mDetails.order_cnt}}</text>
				</view>
				<text class="t4">{{mDetails.name}}</text>
				<text class="t5">{{mDetails.remark}}</text>
			</view>
			<view class="rice-content">
				<baseTitle title="项目介绍" />
				<u-parse :content="htmlContent"></u-parse>
			</view>
		</view>
		<view class="bottom-box">
			<view class="bottom-item" @click.stop="actionMenu('backhome',mDetails.store.store_sn)">
				<image src="/subpages/static/ic_details_home.png" mode="heightFix"></image>
				<text>商家首页</text>
			</view>
			<view class="bottom-item" @click.stop="actionMenu('call',{phoneNumber:mDetails.store.phone})">
				<image src="/subpages/static/ic_details_call.png" mode="heightFix"></image>
				<text>联系商家</text>
			</view>
			<view style="flex: 1;"></view>
			<text class="bottom-btn" @click="toServiceBook">立即预约</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		reLaunch,
		navigateTo
	} from '@/utils/util.js'


	import {
		getProjectItemDetails
	} from '@/api/index.js'
	import {
		onLoad,
		onShareAppMessage
	} from '@dcloudio/uni-app'

	import baseTitle from './components/baseTitle.vue'
	const htmlContent = ref()
	const code = ref()
	const mDetails = ref({})
	const sliders = ref([])

	onLoad((options) => {
		console.log("options=>", options);
		code.value = options.code;
		getData()
	})

	const getData = async () => {
		let res = await getProjectItemDetails({
			code: code.value
		})
		if (res?.code) {
			console.log(res.data);
			mDetails.value = res.data;
			sliders.value = res.data?.sliders?.split("|") || [];
			htmlContent.value = res.data?.content;
		} else {

		}
	}


	const bannerChange = (e) => {
		current.value = e.detail.current
	}
	const handleBack = () => {
		uni.navigateBack()
	}

	const toServiceBook = () => {
		// 服务预约

		uni.setStorageSync("tempDetails", mDetails.value);
		navigateTo({
			url: `/subpages/pages/serviceBook/index?code=${mDetails.value.code}`
		})
	}

	const actionMenu = (type, value) => {
		console.log(value);
		if (type == 'call') {
			uni.makePhoneCall(value);
		} else if (type == 'map') {
			uni.openLocation({
				name: value.name,
				latitude: value.latitude,
				longitude: value.longitude,
				success: function() {
					console.log('success');
				}
			});
		} else if (type == 'backhome') {
			if (value) {
				uni.setStorageSync('store_sn', value)
				reLaunch({
					url: `/pages/main/index`
				})
			} else {
				reLaunch({
					url: `/pages/shopList/index`
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.swiper-box {
		width: 750rpx;
		height: 602rpx;


		.swiper-item {
			width: 750rpx;
			height: 602rpx;

			image {
				display: block;
				width: 750rpx;
				height: 602rpx;
			}
		}
	}

	.content-box {
		position: relative;
		display: flex;
		border-radius: 18rpx;
		background: linear-gradient(180deg, #E4D8CF 0%, #F3F3F5 13%, #F6F6F8 100%);
		margin-bottom: calc(env(safe-area-inset-bottom) + 120rpx);
		flex-direction: column;

		.t1 {
			margin-top: 20rpx;
			margin-left: 28rpx;
			font-size: 32rpx;
			color: #F44D1A;
			font-weight: bold;
		}

		.t2 {
			font-size: 45rpx;
			color: #F44D1A;
			font-weight: bold;
		}

		.t3 {
			margin-top: 20rpx;
			margin-right: 28rpx;
			font-size: 26rpx;
			color: #A2A2A2;
		}

		.white-card {
			margin: 22rpx auto 0 auto;
			display: flex;
			flex-direction: column;
			width: 700rpx;
			min-height: 174rpx;
			background: #FFFFFF;
			border-radius: 18rpx;

			.t4 {
				margin: 20rpx 30rpx 0 30rpx;
				font-size: 32rpx;
				color: #1D161F;
				font-weight: bold;
			}

			.t5 {
				margin: 15rpx 30rpx 34rpx 30rpx;
				font-size: 24rpx;
				color: #717171;
			}
		}

		.base-title {
			font-size: 34rpx;
			margin-top: 38rpx;
			margin-left: 25rpx;
			color: #151515;
			font-weight: 500;
		}

		.rice-content {
			display: flex;
			flex-direction: column;
			width: 700rpx;
			min-height: 1110rpx;
			margin-top: 20rpx;
			margin-left: auto;
			margin-right: auto;
			background: #FFFFFF;
			border-radius: 18rpx;
		}

	}

	.bottom-box {
		position: fixed;
		background: white;
		left: 0;
		right: 0;
		padding-top: 20rpx;
		padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
		bottom: 0;
		display: flex;
		flex-direction: row;
		align-items: center;

		.bottom-item {
			display: flex;
			padding: 0 21rpx;
			flex-direction: column;
			align-items: center;

			image {
				width: 46rpx;
				height: 46rpx;
			}

			text {
				font-size: 22rpx;
				color: #1C2229;
			}
		}

		.bottom-btn {
			width: 331rpx;
			height: 85rpx;
			background: #26A0FF;
			border-radius: 48rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			margin-right: 25rpx;
			font-size: 34rpx;
			color: #FFFFFF;
			font-weight: 500;

			&:active {
				opacity: 0.7;
			}
		}
	}
</style>